<template>
  <div class="app-container flex-column">
    <div class="flex-bd">
      <TableList ref="tableList" :options="tableOptions">
        <template #formList>
          <FormList ref="formList" v-show="tableOptions.serch.show" :formParams="serchParams" :options="serchOptions" @serch="getList('serch')" @reset="getList('reset')"></FormList>
        </template>
        <template #skuType="{row}">
          <dict-tag
            :options="dict.type.data_sku_type"
            :value="row.skuType"
          />
        </template>
        <template #operate="{row}">
          <div class="operate">
            <el-link :underline="false" type="primary" @click="viewList(row.id)" v-hasPermi="tableOptions.edit.auth">
              <i class="el-icon-edit"></i> 编辑
            </el-link>
            <el-link :underline="false" type="danger" @click="delList(row.id)" v-hasPermi="tableOptions.del.auth">
              <i class="el-icon-delete"></i> 删除
            </el-link>
          </div>
        </template>
      </TableList>
    </div>
    <DialogList :options="formDialog">
      <FormList ref="formListDialog" :formParams="formParams" :options="formOptions" :visible="formDialog.visible"></FormList>
      <template #footer>
        <el-button size="small" @click="formDialog.visible = false">取消</el-button>
        <el-button size="small" type="primary" @click="onSubmit">确定</el-button>
      </template>
    </DialogList>
    <DialogList :options="fileDialog">
      <UploadList ref="uploadList" :options="fileDialog" :visible="fileDialog.visible" :down="tableOptions.down"></UploadList>
      <template #footer>
        <el-button size="small" @click="fileDialog.visible = false">取消</el-button>
        <el-button size="small" type="primary" @click="onFileSubmit">确定</el-button>
      </template>
    </DialogList>
  </div>
</template>

<script>
import request from '@/utils/request'
import { objStr } from "@/utils/ruoyi"
import FormList from '@/components/Common/FormList'
import TableList from '@/components/Common/TableList'
import DialogList from '@/components/Common/DialogList'
import UploadList from '@/components/Common/UploadList'
export default {
  name: "TableDemo",
  dicts: ["data_sku_type", "data_packaging_attributes"],
  components: {
    FormList,
    TableList,
    DialogList,
    UploadList
  },
  data() {
    return {
      serchParams: {
        skuCode: ''
      },
      serchOptions: {
        inline: true,
        isSubmit: true,
        columns: [
          {
            type: 'text',
            prop: 'skuCode',
            label: 'skuCode：',
            placeholder: "请输入skuCode",
            clearable: true
          }
        ]
      },
      tableParams: {
        pageNum: 1,
        pageSize: 10,
        orderByColumn: '',
        isAsc: ''
      },
      tableOptions: {
        loading: false,
        list: {
          url: '/data/sku/list'
        },
        add: {
          url: '/data/sku',
          auth: ['data:sku:add'],
          name: '',
          click:() => {
            this.formParams.id = null          
            this.formDialog.title = '新增'
            this.formDialog.visible = true
          }
        },
        import: {
          url: '/data/sku/import',
          auth: ['data:sku:import'],
          name: '',
          click:() => {
            this.fileDialog.visible = true
          }
        },
        down:{
          url: '/data/sku/importTemplate',
          auth: ['data:sku:importTemplate'],
          name: '',
          click:() => {
            this.download(this.tableOptions.down.url, {}, `xxx上传模板.xlsx`)
          }
        },
        export: {
          url: '/data/sku/export',
          auth: ['data:sku:export'],
          name: '',
          click:() => {
            this.download(this.tableOptions.export.url, objStr(this.serchParams), `xxx${new Date().getTime()}.xlsx`)
          }
        },
        del: {
          url: '/data/sku',
          auth: ['data:sku:remove'],
          name: '',
          click:() => {
            this.delList(this.tableOptions.multiples)
          }
        },
        view: {
          url: '/data/sku'
        },
        edit: {
          url: '/data/sku',
          auth: ['data:sku:edit'],
        },
        serch: {
          show: true,
          click:() => {
            this.tableOptions.serch.show = !this.tableOptions.serch.show
          }
        },
        multiples: [],
        config: {
          border: true,
          height: '100%',
          showOverflow: 'tooltip',
          align: 'center',
          scrollY: {
            enabled: true
          },
          checkboxConfig: { 
            checkField: 'checked' 
          },
          sortConfig: {
            remote: true
          },
          columnConfig: {
            minWidth: 100,
            resizable: true
          },
          columns: [
            {
              type: 'checkbox',
              field: 'checkbox',
              width: 42,
              isFilter: true,
              visible: true,
              resizable: false
            },
            {
              field: "skuCode",
              title: "SKUcode",
              isFilter: true,
              visible: true,
              width: 180
            },
            {
              field: "skuName",
              title: "SKU名称",
              isFilter: true,
              visible: true,
            },
            {
              field: "seriesCode",
              title: "系列编号",
              isFilter: true,
              visible: true,
            },
            {
              field: "seriesName",
              title: "系列名称",
              isFilter: true,
              visible: true,
            },
            {
              field: "skuType",
              title: "插槽用法",
              isFilter: true,
              visible: true,
              slots: {
                default: 'skuType'
              },
            },
            {
              field: 'zdy',
              title: 'JSX用法',
              isFilter: true,
              visible: true,
              slots: {
                // 使用 JSX 渲染
                default: ({ row }) => {
                  return [
                    <span style="color: blue">{row.id}自定义自定义插槽内容自定义插槽内容插槽内容</span>
                  ]
                }
              }
            },
            {
              field: 'zdy2',
              title: 'formatter用法',
              isFilter: true,
              visible: true,
              formatter: ({ row }) => {
                return 'formatter' + row.id
              }
            },
            {
              field: "brandCode",
              title: "品牌编号",
              isFilter: true,
              visible: true,
            },
            {
              field: "brandName",
              title: "品牌名称",
              isFilter: true,
              visible: true,
            },
            {
              field: "specifications",
              title: "规格",
              isFilter: true,
              visible: true,
            },
            {
              field: "lifecycleCode",
              title: "生命周期代码",
              isFilter: true,
              visible: true,
              width: 120
            },
            {
              field: "splitAttributes",
              title: "拆套属性",
              isFilter: true,
              visible: true,
            },
            {
              field: 'operate',
              title: '操作',
              isFilter: true,
              visible: true,
              slots: {
                default: 'operate'
              },
              fixed: 'right',
              width: 200
            }
          ],
          data: [],
        },
        method: {
          ['sort-change']:({ sortList }) => {
            this.tableParams.orderByColumn = sortList[0]?.field
            this.tableParams.isAsc = sortList[0]?.order ? sortList[0]?.order : null
            this.getList()
          },
          ['checkbox-all']:() => {
            let arr = this.$refs['tableList'].$refs['table'].getCheckboxRecords()
            this.tableOptions.multiples = arr.map(v => v.id)
          },
          ['checkbox-change']:() => {
            let arr = this.$refs['tableList'].$refs['table'].getCheckboxRecords()
            this.tableOptions.multiples = arr.map(v => v.id)
          }
        },
        pageConfig: {
          total: 0
        },
        pageMethod: {
          ['current-change']:(val) => {
            this.tableParams.pageNum = val
            this.getList()
          },
          ['size-change']:(val) => {
            this.tableParams.pageSize = val
            this.getList()
          }
        }
      },
      formDialog: {
        title: '新增',
        visible: false,
      },
      formParams: {
        id: null,
        skuCode: ''
      },
      formOptions: {
        inline: false,
        labelWidth: '7em',
        isSubmit: false,
        columns: [
          {
            type: 'text',
            prop: 'skuCode',
            label: 'skuCode：',
            placeholder: "请输入skuCode",
            rules: [
              { required: true, message: '请输入skuCode', trigger: 'blur' }
            ]
          }
        ]
      },
      fileDialog: {
        title: '文件上传',
        visible: false,
        ['http-request']:(res) => {
          this.onUploadFile(res)
        } 
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList(type){
      this.tableOptions.multiples = []
      if (type === 'serch') {
        this.tableParams.pageNum = 1
      }
      if (type === 'reset') {
        this.tableParams.pageNum = 1
        this.tableParams.pageSize = 10
        this.tableParams.orderByColumn = ''
        this.tableParams.isAsc = ''
        this.$refs['tableList'].$refs['table'].clearSort()
      }
      this.tableOptions.loading = true
      let { rows, total } = await request({
        url: this.tableOptions.list.url,
        method: 'get',
        params: {
          ...objStr(this.serchParams),
          ...this.tableParams
        }
      })
      setTimeout(() => {
        this.tableOptions.loading = false
        this.tableOptions.config.data = rows
        this.tableOptions.pageConfig.total = total
      }, 300)
    },
    async addList() {
      let { heads, rows, total } = await request({
        url: this.tableOptions.add.url,
        method: 'post',
        data: this.formParams
      })
      this.$modal.msgSuccess("新增成功")
      this.formDialog.visible = false
      this.getList('serch')
    },
    async viewList(id) {
      this.formDialog.title = '编辑'
      this.formDialog.visible = true
      let { data } = await request({
        url: this.tableOptions.view.url + '/' + id,
        method: 'get'
      })
      for (let key in this.formParams) {
        this.formParams[key] = data[key]
      }
    },
    async editList(obj) {
      await request({
        url: this.tableOptions.edit.url,
        method: 'put',
        data: obj ? obj : this.formParams
      })
      this.$modal.msgSuccess("编辑成功")
      this.formDialog.visible = false
      this.getList()
    },
    delList(id) {
      this.$modal.confirm('是否确认删除？').then(async () => {
        await request({
          url: this.tableOptions.del.url + '/' + id,
          method: 'delete'
        })
        this.$modal.msgSuccess("删除成功")
        this.getList('serch')
      })
    },
    async onSubmit() {
      let isCheck = this.$refs['formListDialog'].onValidate()
      if (isCheck) {
        if (this.formParams.id) {
          this.editList()
        } else {
          this.addList()
        }
      }
    },
    async onFileSubmit(){
      this.$refs['uploadList'].onSubmitFile();
    },
    async onUploadFile(res){
      const formData = new FormData()
      formData.append('file', res.file)
      await request({
        url: this.tableOptions.import.url, 
        method: 'post', 
        data: formData
      })
      this.fileDialog.visible = false
      this.$modal.msgSuccess("导入成功")
      this.getList('serch')
    }
  },
};
</script>

<style scoped lang="scss"></style>

